<template>
  <div class="frame-select">
    <ul class="frame-list">
      <li class="list-item" :class="{checked: selectIndex === i}" v-for="(item, i) in list" :key="i" @click="onSelect(item, i)">
        <FrameItem :configs="item" />
        <el-icon class="select-icon" color="#ffffff" size="16px"><Select /></el-icon>
      </li>
    </ul>
    <div class="confirm-item">
      <el-button @click="confirm" class="btn" type="primary" size="large" :disabled="selectIndex < 0">确认选择</el-button>
    </div>
  </div>
</template>

<script setup>
  import { ref, defineEmits, defineProps, computed, onBeforeUnmount } from 'vue'
  import FrameItem from './FrameItem.vue'
  import frameStyles from '../libs/frameStyles'

  const props = defineProps({
    exifData: {
      type: Object,
      required: true,
      default: null
    },
    // logo url
    logo: {
      type: String,
      required: true,
      default: require('../assets/img/logo/apple.png'),
    },
  })

  const $emit = defineEmits(['success'])

  const list = computed(() => {
    return frameStyles(props.exifData, props.logo)
  })

  
  const selectIndex = ref(-1)
  let currentFrame = null

  const onSelect = (item, index) => {
    selectIndex.value = index
    currentFrame = item
  }

  const confirm = () => {
    const aligns = currentFrame.map(item => item.align)
    // 单列水平垂直居中宽高比为9，多列水平排版宽高比为11
    const frameProportion = aligns.includes('center-top') ? 9 : 11
    $emit('success', {
      frameConfigs: currentFrame,
      frameProportion, // 相框宽高比
    })
  }

  onBeforeUnmount(() => {
    currentFrame = null
  })
</script>

<style lang="less" scoped>
  .frame-select {
    // overflow-y: auto;
  }
  .frame-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
  }
  .list-item {
    width: 100%;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    opacity: 0.8;
    transition: opacity 0.2s ease 0s;
    cursor: pointer;
    &:hover {
      opacity: 1;
    }
    &:after {
      content: "";
      position: absolute;
      width: 85px;
      height: 85px;
      right: 0;
      bottom: 0;
      background-color: #409EFF;
      transform: rotate(45deg) translate(91%, 20%);
      opacity: 0;
      transition: opacity 0.2s ease 0s;
    }
    &.checked {
      opacity: 1;
      &:after {
        z-index: 2100;
        opacity: 1;
      }
      .select-icon {
        z-index: 2101;
        opacity: 1;
      }
    }
    .logo {
      width: 60%;
      height: auto;
      cursor: pointer;
    }
  }
  .select-icon {
    transition: opacity 0.2s ease 0s;
    transform: rotate(0);
    position: absolute;
    right: 3px;
    bottom: 3px;
    opacity: 0;
  }
  .confirm-item {
    padding: 20px;
    display: flex;
    justify-content: center;
    .btn {
      width: 100%;
      box-sizing: border-box;
    }
  }
</style>
